<template>
  <div>
    <div class="container grid-container">
      <div class="flex1">
        <article-list :pagination="paginationData" :data="article"></article-list>
      </div>
      <page-aside :tags="tags"></page-aside>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import request from '~/assets/request'
import ArticleList from '~/components/articleList'
import PageAside from '~/components/pageAside'

export default {
  name: 'index',
  head() {
    return {
      title: '卢忠宽的个人博客'
    }
  },
  async fetch({ store, query }) {
    const { page = 1, size = 10, tagId = '', search = '' } = query
    const params = { page, size, tagId, search }
    const { data: { list, total } } = await request({
      url: '/api/article',
      params
    })
    this.page = page
    this.size = size
    await store.dispatch('fetchTags')
    store.dispatch('setState', {
      payload: params,
      total,
      article: list
    })
  },
  computed: {
    ...mapState([
      'article',
      'tags',
      'total'
    ]),
    paginationData() {
      const { page = 1, size = 10 } = this.$route.query
      const { total } = this
      return { total, page, size }
    }
  },
  watchQuery: ['page', 'size', 'tagId', 'search'],
  components: {
    ArticleList,
    PageAside
  }
}
</script>

<style lang="scss" scoped>
.container {
  max-width: 1000px;
}
@media (min-width: 768px) {
  .container {
    display: flex;
  }
  .article-list {
    flex: 1;
  }
}
</style>

